<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有向图展示</title>
    <link rel="stylesheet" href="semantic.css">
    <!-- 引入 CodeMirror 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/codemirror.min.css">
    <!-- 引入 CodeMirror 的 JavaScript 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/codemirror.min.js"></script>
    <!-- 引入 JavaScript 语言模式 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/mode/javascript/javascript.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/marked/15.0.6/marked.min.js"></script>
    <style>
        .CodeMirror {
            height: 200px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="sidebar" class="left-options">
        <ul>
            <li onclick="showPage('homePage')">自己的目标</li>
            <li onclick="showPage('myGoal')">自己的目标</li>
            <li onclick="showPage('intro')">语义网络介绍</li>
            <li onclick="showPage('businessPlan')">商业计划书</li>
            <li onclick="showPage('productIntro')">产品介绍</li>
            <li onclick="showPage('demo')">语义网络样例展示</li>
            <li onclick="showPage('script')">语义网络脚本展示</li>
            <li onclick="showPage('fusion')">语义网络融合展示</li>
            <li onclick="showPage('market')">语义网络组件市场</li>
        </ul>
    </div>
    <div id="content">
        <div id="homePage" class="page">
            <!-- 语义网络介绍内容 -->
            <link href="index.html">
            <a id="network-url" href="index.html" style="" >正式首页</a>
        </div>
        <div id="myGoal" class="page">
            <!-- 语义网络介绍内容 -->
            <div id="markdown-myGoal"></div>
        </div>
        <div id="intro" class="page">
            <!-- 语义网络介绍内容 -->
            <div id="markdown-content"></div>
        </div>
        <div id="businessPlan" class="page">
            <div id="markdown-businessPlan"></div>
        </div>
        <div id="productIntro" class="page">
            <p>产品详细介绍</p>
            <div id="markdown-targetProduct"></div>
        </div>
        <div id="demo" class="page">
            <h3> 语义网络整体结构 </h3>
            <div id="graph-container"></div>
            <div id="search-container">
                <input type="text" id="search-start" placeholder="起始节点" />
                <input type="text" id="search-dest" placeholder="目标节点" />
                <button id="showNodesButton">路径查询</button>
            </div>
            <h3> 语义网络路径查询 </h3>
            <div id="graph-pathShow" class="svg-container"></div>


            <!-- 模态框 -->
            <div id="myModal" class="modal">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <h3> 语义网络路径执行 </h3>
                    <div id="input-container"></div>
                    <div id="result-container"></div>
                    <button id="confirm-btn">确认</button>
                    <button id="cancel-btn">退出</button>
                </div>
            </div>
        </div>
        <div id="script" class="page ">
            <h3> 语义网络代码编辑区域 </h3>
            <!-- 代码编辑区域 -->
            <textarea id="editor"></textarea>
            <!-- 确认按钮 -->
            <button class="display-box" id="confirmButton">确认</button>
            <div id="script-show"></div>

        </div>
        <div id="fusion" class="page active">
            <!-- 语义网络融合展示内容 -->
            <h4>通用场景信息获取demo展示</h4>
            <p>
                1.定义自己的语义网络信息<br>
                2.访问者上传自己的位置<br>
                3.在位置后追加信息获取自己想要的信息
            </p>

            <h4>任意脚本执行测试</h4>

            <div class="input-group">
                <label for="root-location">位置</label>
                <input type="text" id="root-location" placeholder="请输入位置">
            </div>

            <div class="script-exec">
                <div class="input-group">
                    <label for="script-search-path">执行脚本</label>
                    <input type="text" id="script-search-path" placeholder="请输入执行脚本">
                </div>
                <div class="display-box" id="script-box">
                    <label>执行结果</label>
                </div>

            </div>

            <button class="confirm-button" onclick="scriptConfirmAction()">执行脚本</button>
            <div id="map-show"></div>
            <button class="confirm-button" onclick="showModel()">绘图</button>

            <h3> 模型名称不同融合示例 </h3>
            <div class="container">
                <!-- 左边块 -->
                <div class="left-block">

                    <h3>访问者信息</h3>

                    <label for="visitor-model">访问者认可模型</label>
                    <input type="text" id="visitor-model" name="visitor-model">
                    <label for="evaluation-script">求值脚本</label>
                    <input type="text" id="evaluation-script" name="evaluation-script">

                    <div class="display-box" id="value-box">
                        <label>调用结果</label>
                    </div>

                </div>

                <!-- 右边块 -->
                <div class="right-block">
                    <h3>被访问者信息</h3>
                    <label for="visited-model">被访问者实现模型</label>
                    <input type="text" id="visited-model" name="visited-model">
                    <label for="target-concept">目标语义网络</label>
                    <input type="text" id="target-concept" name="target-concept">

                    <label for="script">兼容脚本</label>
                    <textarea id="formula-script" name="script"></textarea>

                    <label for="semantic-network">实现语义网络</label>
                    <input type="text" id="semantic-network" name="semantic-network">

                    <label for="current-location">当前位置</label>
                    <input type="text" id="current-location" name="current-location">

                    <div class="display-box" id="destCallUrl-box">
                        <label>匹配访问者模型后的地址</label>
                    </div>
                    <!-- 执行按钮 -->
                    <button class="execute-button" onclick="genCallUrl()">匹配访问者模型</button>
                </div>
            </div>
            <!-- 执行按钮 -->
            <button class="execute-button" onclick="realDemoShow()">调用被访问者</button>

            <h3> 自定义融合示例 </h3>

            <button  onclick="setCaseData('diffNameCase')">访问外部-名称不同case</button>
            <button  onclick="setCaseData('diffStructCase')">访问外部-层级不同case</button>
            <button  onclick="setCaseData('diffDimCase')">访问外部-维度不同case</button>

            <div class="container">
                <div class="left-block">
                    <h3>访问者信息</h3>

                    <label for="visit-concept-name">网络名称</label>
                    <input type="text" id="visit-concept-name" name="visit-concept-name">
                    <label for="script">访问者接口定义脚本</label>
                    <textarea id="visit-define-script" name="script"></textarea>
                    <button onclick="submit_script()">构建网络</button>
                    <BR>
                    <label for="visit-object">访问的对象</label>
                    <input type="text" id="visit-object" name="visit-object">

                    <label for="eval-script">访问的具体信息</label>
                    <input type="text" id="eval-script" name="eval-script">

                    <label for="return-value">最终返回值</label>
                    <input type="text" id="return-value" name="return-value">

                </div>
                <!-- 右边块 -->
                <div class="right-block">
                    <h3>被访问者信息</h3>
                    <label for="visited-concept-name">网络名称</label>
                    <input type="text" id="visited-concept-name" name="visited-concept-name">
                    <label for="script">被访问者定义脚本</label>
                    <textarea id="visited-define-script" name="script"></textarea>

                    <label for="script">概念对齐脚本</label>
                    <textarea id="to-same-level-script" name="script"></textarea>

                    <label for="current-location">访问对象具体值</label>
                    <input type="text" id="location" name="current-location">

                    <label for="current-location">最终访问URL</label>
                    <input type="text" id="locationUrl" name="current-location">

                    <button onclick=" submit_visitedAndBuildMerge()">构建网络和创建对齐网络</button>

                </div>
            </div>
            <button class="execute-button" onclick="allCaseDemoShow()">调用被访问者</button>

        </div>

        <div id="market" class="page">
            <!-- 语义网络市场内容 -->
            <p>这里是语义网络市场页面，可添加具体市场相关内容。</p>
        </div>
    </div>

    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="script.js"></script>
    <link>
</body>

</html>